<!DOCTYPE html>
<html lang="en" xmlns:th="www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>Title</title>

    <link href="/bootstrap-3.4.1/css/bootstrap.min.css" rel="stylesheet">
    <script src="/javascript/jQuery-1.12.4.js"></script>
    <script src="/bootstrap-3.4.1/js/bootstrap.min.js"></script>

    <!-- 引入axios的包 -->
    <script src="/javascript/axios-min.js"></script>
    <!-- 引入vue的包 -->
    <script src="/javascript/vue-2.7.14.js"></script>

</head>
<body>
<h3>显示书籍</h3>

<table class="table table-condensed table-hover">
    <tr>
        <td>书籍ID</td>
        <td>书籍名称</td>
        <td>收藏数</td>
        <td>作者</td>
        <td>类型</td>
        <td>价格</td>
        <td>出版日期</td>
        <td>说明</td>
        <td>操作</td>
    </tr>

    <tr th:each="book: ${page.list}">
        <td th:text="${book.id}">ID</td>
        <td th:text="${book.bookName}">书籍名称</td>
        <td th:text="${book.bookCollectionCount}">收藏数</td>
        <td th:text="${book.bookAuthorId}">作者</td>
        <td th:text="${book.typeId}">类型</td>
        <td th:text="${book.bookPrice}">价格</td>
        <td th:text="${#dates.format(book.publisherDate, 'yyyy-MM-dd HH:mm:ss')}">出版日期</td>
        <td th:text="${book.introduction}">说明</td>
        <td>

            <!-- 使用thymeleaf的方式传值到函数中 -->
            <input class="btn btn-info" type="button" value="修改" data-toggle="modal" data-target="#editModal"
                   th:onclick="edit([[${book.id}]])"/>

            <!-- 使用thymeleaf的方式进行拼接操作 -->
            <a th:href="@{|/book/del/${book.id}|}" class="btn btn-danger">删除</a>
        </td>
    </tr>
</table>


<!-- 修改书籍的模态框 -->
<div class="modal fade" id="editModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span>
                </button>
                <h4 class="modal-title" id="myModalLabel">修改书籍</h4>
            </div>
            <div class="modal-body">

                <div id="app">
                    <form class="form-horizontal">
                        <div class="form-group">
                            <label class="col-sm-3 control-label">书籍ID：</label>
                            <div class="col-sm-8">
                                <input type="text" class="form-control" v-model="id">
                            </div>
                        </div>

                        <div class="form-group">
                            <label class="col-sm-3 control-label">书籍名称：</label>
                            <div class="col-sm-8">
                                <input type="text" class="form-control" v-model="bookName">
                            </div>
                        </div>

                        <div class="form-group">
                            <label class="col-sm-3 control-label">书籍图片：</label>
                            <div class="col-sm-8">
                                <input type="text" class="form-control" v-model="bookImg">
                            </div>
                        </div>

                        <div class="form-group">
                            <label class="col-sm-3 control-label">书籍类型：</label>
                            <div class="col-sm-8">
                                <select class="form-control" v-model="typeId">
                                    <option v-for="type in typeList" :value="type.id" >{{type.name}}</option>
                                </select>
                            </div>
                        </div>

                        <div class="form-group">
                            <label class="col-sm-3 control-label">书籍作者：</label>
                            <div class="col-sm-8">
                                <input type="text" class="form-control" v-model="bookAuthorId">
                            </div>
                        </div>

                        <div class="form-group">
                            <label class="col-sm-3 control-label">出版社：</label>
                            <div class="col-sm-8">
                                <input type="text" class="form-control" v-model="publisherId">
                            </div>
                        </div>

                        <div class="form-group">
                            <label class="col-sm-3 control-label">书籍价格：</label>
                            <div class="col-sm-8">
                                <input type="text" class="form-control" v-model="bookPrice">
                            </div>
                        </div>

                        <div class="form-group">
                            <label class="col-sm-3 control-label">书籍库存：</label>
                            <div class="col-sm-8">
                                <input type="text" class="form-control" v-model="bookStoreCount">
                            </div>
                        </div>


                    </form>
                </div>

            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-primary" onclick="doEdit()">确定修改</button>
                <button type="button" class="btn btn-default" data-dismiss="modal">关闭窗口</button>
            </div>
        </div>
    </div>
</div>


<script>
    // 准备修改的书籍数据
    function edit(id) {
        console.log("要修改的书籍id:" + id);
        // 拿到id之后，我们去把要修改的数据查询出来，并把数据显示在修改的模态框里面
        // 因为模态框就在当前的页面上，我们根据id得到要修改书籍之后，并没有跳转页面，所以这里使用ajax请求
        vue.getBookById(id);
    }

    // 确定修改书籍数据
    function doEdit() {
        vue.doEditBook();
    }


    let vue = new Vue({
        el: "#app",
        data: {
            id: "",
            bookName: "",
            bookImg: "",
            typeId: "",
            bookAuthorId: "",
            publisherId: "",
            bookPrice: "",
            bookStoreCount: "",
            typeList: []
        },
        methods: {
            getBookById(id) {
                axios.get('/book/find/' + id)
                    .then(function (response) {
                        let book = response.data.data;
                        vue.id = book.id;
                        vue.bookName = book.bookName;
                        vue.bookImg = book.bookImg;
                        vue.typeId = book.typeId;
                        vue.bookAuthorId = book.bookAuthorId;
                        vue.publisherId = book.publisherId;
                        vue.bookPrice = book.bookPrice;
                        vue.bookStoreCount = book.bookStoreCount;

                    }).catch(function (error) {
                    console.log(error);
                });
            },
            doEditBook() {
                // let params = new URLSearchParams();
                // params.append("id",vue.id);
                // params.append("bookName",vue.bookName);

                axios.put('/book/edit', {
                    "id": vue.id,
                    "bookName": vue.bookName,
                    "bookPrice": vue.bookPrice,
                    "typeId": vue.typeId
                }).then(function (response) {

                    if(response.status == 200){
                        // 这里只能使用jQuery来关闭模态框
                        $("#editModal").modal("hide")

                        // 关闭了窗口之后，还有一个回显数据的操作
                        location.href = "./showByPage?pageNum=1&pageSize=5";
                    }
                    console.log(response);

                }).catch(function (error) {
                    console.log(error);
                });
            }
        },       created: function (){
            axios.get('/bookType/showAll')
                .then(function (response) {
                    console.log(response.data.data);

                    vue.typeList = response.data.data;
                }).catch(function (error) {
                console.log(error);
            });
        }

    })


</script>

</body>
</html>
